<template>
	<view class="teamdetail">
		<view class="headtop">
			<view class="headtitile">
				<image src="../../../static/images/left.png" @click="fanhui"></image>
				<text @click="fanhui">AI团队详情</text>
			</view>
		</view>
		<view class="body">
			<view class="center">
				<view class="li clearfix">
					<view class="name fl">用户名：</view>
					<view class="desc fl">{{userData.username}}</view>
				</view>
				<view class="li clearfix">
					<view class="name fl">手机号：</view>
					<view class="desc fl">{{userData.mobile}}</view>
				</view>
				<view class="li clearfix">
					<view class="name fl">创建时间：</view>
					<view class="desc fl">{{userData.create_time}}</view>
				</view>
				<view class="li clearfix">
					<view class="name fl">过期时间：</view>
					<view class="desc fl">{{userData.expire_time}}</view>
				</view>
				<view class="li clearfix">
					<view class="name fl">最后登录时间：</view>
					<view class="desc fl">{{userData.last_login_time}}</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="title">今日数据</view>
			<view class="list clearfix">
				<view class="li fl">
					<view class="top clearfix">
						<view class="desc fl">AI抓取次数</view>
					</view>
					<view class="shuzi">{{jrData.zhuaqu}}<text>次</text></view>
				</view>
				<view class="li fl">
					<view class="top clearfix">
						<view class="desc fl">AI拓客次数</view>
					</view>
					<view class="shuzi">{{jrData.tuoke}}<text>次</text></view>
				</view>
				<view class="li fl">
					<view class="top clearfix">
						<view class="desc fl">已开发客户数</view>
					</view>
					<view class="shuzi">{{jrData.kaifa}}<text>人</text></view>
				</view>
				<view class="li fl">
					<view class="top clearfix">
						<view class="desc fl">私信成功次数</view>
					</view>
					<view class="shuzi">{{jrData.sixin}}<text>次</text></view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="title">本月数据</view>
			<view class="list clearfix">
				<view class="li fl">
					<view class="top clearfix">
						<view class="desc fl">AI抓取次数</view>
					</view>
					<view class="shuzi">{{byData.zhuaqu}}<text>次</text></view>
				</view>
				<view class="li fl">
					<view class="top clearfix">
						<view class="desc fl">AI拓客次数</view>
					</view>
					<view class="shuzi">{{byData.tuoke}}<text>次</text></view>
				</view>
				<view class="li fl">
					<view class="top clearfix">
						<view class="desc fl">已开发客户数</view>
					</view>
					<view class="shuzi">{{byData.kaifa}}<text>人</text></view>
				</view>
				<view class="li fl">
					<view class="top clearfix">
						<view class="desc fl">私信成功次数</view>
					</view>
					<view class="shuzi">{{byData.sixin}}<text>次</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';

	export default {
		data() {
			return {
				id: '',
				userData: [],
				jrsdate: '',
				jredate: '',
				bysdate: '',
				byedate: '',
				jrData: {
					zhuaqu: 0,
					tuoke: 0,
					kaifa: 0,
					sixin: 0,
				},
				byData: {
					zhuaqu: 0,
					tuoke: 0,
					kaifa: 0,
					sixin: 0,
				},
			}
		},
		onLoad(options) {
			this.id = options.id;
			
			let jrdate = this.getDate('today');
			this.jrsdate = jrdate.startTime;
			this.jredate = jrdate.endTime;
			
			let bydate = this.getDate('thisMonth');
			this.bysdate = bydate.startTime;
			this.byedate = bydate.endTime;

			// 用户基本信息
			request({
				url: '/api/user/teamdetail',
				method: 'GET',
				data: {
					id: this.id,
				},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				this.userData = response.data.list;

				this.getjrData(this.userData.id, this.jrsdate, this.jredate);
				this.getbyData(this.userData.id, this.bysdate, this.byedate);
			}).catch((error) => {});
		},
		methods: {
			refresh() {
				this.getjrData(this.userData.id, this.jrsdate, this.jredate);
				this.getbyData(this.userData.id, this.bysdate, this.byedate);
			},
			getjrData(user_id,jrsdate,jredate) {
				request({
					url: '/api/usergroupbuy/teamjrtongji',
					method: 'POST',
					data: {
						user_id: user_id,
						sdate: jrsdate,
						edate: jredate,
					},
				}).then((response) => {
					this.jrData = response.data.list;
				}).catch((error) => {});
			},
			getbyData(user_id,bysdate,byedate) {
				request({
					url: '/api/usergroupbuy/teambytongji',
					method: 'POST',
					data: {
						user_id: user_id,
						sdate: bysdate,
						edate: byedate,
					},
				}).then((response) => {
					this.byData = response.data.list;
				}).catch((error) => {});
			},
			//格式化时间
			formatTime(param) {
				let y = param.getFullYear();
				let m = param.getMonth() + 1;
				let d = param.getDate();
				m = m < 10 ? ("0" + m) : m;
				d = d < 10 ? ("0" + d) : d;
				return y + "-" + m + "-" + d;
			},
			getDate(code) {
				const date = new Date();
				let endTime = this.formatTime(date);
				let date1 = Date.parse(date);
				let start = '';
				let end = '';
				let oneDay = 1000 * 3600 * 24;

				switch (code) {
					//今天
					case 'today':
						start = new Date();
						break;
						//最近2天
					case 'lastTwoDay':
						start = date1 - oneDay * 2;
						break;
						//最近1周
					case 'lastOneWeek':
						start = date1 - oneDay * 7;
						break;
						//最近2周
					case 'lastTwoWeek':
						start = date1 - oneDay * 14;
						break;
						//最近1月
					case 'lastOneMonth':
						start = new Date();
						start.setMonth(start.getMonth() - 1)
						break;
						//最近2月
					case 'lastTwoMonth':
						start = new Date();
						start.setMonth(start.getMonth() - 2)
						break;
						//最近3月
					case 'lastThreeMonth':
						start = new Date();
						start.setMonth(start.getMonth() - 3)
						break;
						//最近半年
					case 'lastHalfYear':
						start = date1 - oneDay * 183;
						break;
						//最近一年
					case 'lastOneYear':
						start = new Date();
						start.setYear(start.getFullYear() - 1)
						break;
						//本周
					case 'thisWeek':
						let a = 6 - date.getDay();
						start = new Date(date1 - oneDay * a).setHours(0, 0, 0, 0);
						end = new Date(date1 + oneDay * (1 + date.getDay())).setHours(24, 0, 0, 0)
						break;
						//本月
					case 'thisMonth':
						start = new Date();
						start.setHours(0, 0, 0, 0)
						start.setMonth(start.getMonth(), 1)
						end = new Date(start)
						end.setHours(0, 0, 0, 0)
						end.setMonth(start.getMonth() + 1, 1)
						break;
						//本年
					case 'thisYear':
						start = new Date();
						start.setHours(0, 0, 0, 0)
						start.setMonth(0, 1)
						start.setYear(start.getFullYear())
						end = new Date(start)
						end.setHours(0, 0, 0, 0)
						end.setMonth(start.getMonth(), 1)
						end.setYear(start.getFullYear() + 1)
						break;
				}

				return {
					startTime: this.formatTime(new Date(start)),
					endTime: end ? this.formatTime(new Date(end)) : endTime,
				}
			},
			fanhui() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.teamdetail {
		width: 100%;
		margin: 0 auto;

		.headtop {
			width: 100%;
			margin: 0 auto;
			position: relative;
			height: 166rpx;
			z-index: 200;

			.headtitile {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				top: 60rpx;
				left: 3%;
				height: 96rpx;
				line-height: 96rpx;

				image {
					width: 20rpx;
					height: 36rpx;
					float: left;
					margin-right: 18rpx;
					margin-top: 28rpx;
				}

				text {
					font-size: 32rpx;
					color: #FFFFFF;
					float: left;
					height: 96rpx;
					line-height: 96rpx;
				}
			}
		}

		.body {
			width: 94%;
			margin: 0 auto 20rpx;

			.center {
				width: 94%;
				margin: 0 auto;

				.li {
					width: 100%;
					line-height: 52rpx;

					.name {
						width: 190rpx;
						color: #FFFFFF;
						font-size: 24rpx;
					}

					.desc {
						color: #ABB0CC;
						font-size: 24rpx;
					}
				}
			}
		}

		.container {
			width: 94%;
			margin: 0 auto 20rpx;
			border: 1rpx solid #454B57;
			border-radius: 10rpx;
			padding: 20rpx 20rpx 0 20rpx;
			box-sizing: border-box;

			.title {
				margin-top: 10rpx;
				margin-bottom: 29rpx;
				font-size: 30rpx;
				color: #ffffff;

				.left {
					font-size: 30rpx;
					color: #ffffff;
				}

				.right {
					font-size: 28rpx;
					color: #ffffff;
				}
			}

			.list {
				width: 100%;

				.li {
					width: 320rpx;
					border-radius: 10rpx;
					background: #242831;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					padding: 30rpx 0 26rpx 30rpx;
					box-sizing: border-box;

					.top {
						margin-bottom: 20rpx;

						image {
							width: 36rpx;
							height: 36rpx;
							margin-right: 10rpx;
						}

						.desc {
							font-size: 28rpx;
							color: #ffffff;
							height: 36rpx;
							line-height: 36rpx;
						}
					}

					.shuzi {
						font-size: 40rpx;
						color: #ffffff;
						font-weight: 700;

						text {
							font-size: 28rpx;
						}
					}
				}

				.li:nth-of-type(2n) {
					margin-right: 0;
				}
			}
		}
	}
</style>